<template>
	<view class="tabbar" :style="{ 'padding-bottom': paddingBottomHeight + 'rpx' }">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<view class="tabbar-content" :class="{ tabbarActive: current == index }">
				<image class="item-img" :src="item.selectedIconPath" v-if="current == index"></image>
				<image class="item-img" :src="item.iconPath" v-else></image>
				<view class="item-name" v-if="item.text">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCurrentPageUrl } from '@/utils/util.js';
export default {
	props: {
		current: String,
	},
	data() {
		return {
			paddingBottomHeight: 0, //苹果X以上手机底部适配高度
			list: [
				{
					path: '/pages/ropeSkipping/ropeSkipping', //页面路径
					text: '跳绳',
					// iconPath: '/static/image/bar/rope.png', //未选中图片
					// selectedIconPath: '/static/image/bar/selRope.png' //选中图片
					iconPath: 'https://edu.c-eplus.com/schoolfiles/parentapp/static/image/bar/rope.png',
					selectedIconPath: 'https://edu.c-eplus.com/schoolfiles/parentapp/static/image/bar/selRope.png' //选中图片
				},
				{
					path: '/pages/PKBattle/PKPattern',
					text: 'PK对战',
					iconPath: 'https://edu.c-eplus.com/schoolfiles/parentapp/static/image/bar/PK.png',
					selectedIconPath: 'https://edu.c-eplus.com/schoolfiles/parentapp/static/image/bar/selPK.png'
				},
				{
					path: '/pages/rankingList/rankingList',
					text: '排行榜',
					iconPath: 'https://edu.c-eplus.com/schoolfiles/parentapp/static/image/bar/rank.png',
					selectedIconPath: 'https://edu.c-eplus.com/schoolfiles/parentapp/static/image/bar/selRank.png'
				}
			],
		};
	},
	onShow() {
		let that = this;
		uni.getSystemInfo({
			success: function(res) {
				let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
				model.forEach(item => {
					//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
					if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
						that.paddingBottomHeight = 40;
					}
				});
			}
		});
	},
	methods: {
		//这里就是点击跳转的页面
		tabbarChange(path) {
			let curUrl = getCurrentPageUrl();//获取当前页路由
			
			//离开弹窗确认
			if(curUrl=="pages/PKBattle/PKBattle"){
				//通过$parent属性找到父元素的Vue对象
				this.$parent.confirmModal=true;
				this.$parent.toPath=path;
			}else{
				uni.switchTab({
					url: path
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.border-right {
	border-right: 1px solid #707070;
}
.tabbar {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 126rpx;
	// padding-top: 10rpx;
	// padding-bottom: 10rpx !important;
	background-color: #ffffff;

	.tabbar-item {
		display: flex;
		flex: 1;
		height: 100%;

		.tabbar-content {
			height: 100%;
			// width: 136rpx;
			width: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
		.item-img {
			margin-top: 10rpx;
		}
		.item-name {
			color: #060606;
			line-height: 50rpx;
			font-size: 24rpx;
		}

		&:first-child .item-img {
			width: 40rpx;
			height: 62rpx;
		}

		&:nth-child(2) .item-img {
			width: 62rpx;
			height: 60rpx;
		}

		&:nth-child(3) .item-img {
			width: 40rpx;
			height: 44rpx;
		}
	}

	.tabbarActive {
		background-color: #ff6414;
		box-shadow: inset 0px 4px 4px 0px rgba(255, 161, 73, 0.81);
		.item-name {
			color: #fff;
		}
	}
}
</style>
